<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击我加载b模块</button>
    <script type = "module">
        // 一.导入和导出
        // 导入：1.impot "./lu路径.js";2.import{a,b}from"./路径。js";
        // 导出：ezport{变量}  export let a = 20; 导出多个
        // 导入和导出  变量名称要对应





        

        // 二.默认的导入和导出 
        // 导入名称 可以自定义变量接受， 不需要{}；
        // import  c from'./a.js';
        // obj 对应的 是export default导出的内容 。 {c,d}是export里导出的内容
        // import obj,{c,d} from './a.js';
        // console.log(a,b);
        // let {a,b} = obj ; //解构赋值；
        // console.log(a,b);
        // console.log(c,d);






        // // 三.使用通配符 接收 所有的export 和 export default 里的内容，*
        // // import obj，{c,d} from './a.js';
        //    console.log(obj,default.a);






        // 四.懒加载模块（按需加载）
        import"./a.js";//立刻加载
        import"./b.js";

        document.querySelector("button").onclick = function(){
            //懒加载，点击按钮是在加载b模块
            // import"./b.js"
            // import"./b.js"//提供了一个import 函数 按需加载模块
            import("./b.js").then(res =>{
                console.log(res);
            })
                }

    </script>
</body>
</html>